<template>
  <view class="before-result-page-common">
    <navigationBar :my-property="navigationBarDataInfo" />
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>
    <template v-for="(img,index) in staticImgs.imgArr">
      <view class="img-wrapper">
        <image class="img" :src="img" mode="widthFix"></image>
        <view class="box-wrapper-1-pos" v-if="index === 0">

          <view class="base-info-wrapper">
            <view class="num-box">测评报告编号：288748989898966</view>
            <view class="name-box">
              {{sclName}}
              
            </view>
            <view class="conclusion-box">
              <view class="time">测评时间：{{sclTime}}</view>
            </view>
          </view>

          <view class="price-wrapper">
            <view class="price-box-1" v-if="couponInfo.id">原价 {{sclInfo.newOriginalPrice}}</view>
            <BlockBtnNormal @click="confirmHandle" :styleType="mainBtnType" :priceInfo="priceInfo"/>
          </view>

          <view class="intro-detail-box">
            {{sclIntro}}
          </view>

        </view>

        <view class="box-wrapper-2-pos" v-else-if="index === 1">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>

        <view class="box-wrapper-3-pos" v-else-if="index === 2">
          <view  class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-4-pos" v-else-if="index === 3">
          <view  class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-5-pos" v-else-if="index === 4">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-6-pos" v-else-if="index === 5">
          <view  class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-7-pos" v-else-if="index === 6">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-8-pos" v-else-if="index === 7">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-9-pos" v-else-if="index === 8">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>


        <view class="box-wrapper-11-pos" v-else-if="index === 10">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>

        <view class="box-wrapper-13-pos" v-else-if="index === 12">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>



      </view>
    </template>

    <view class="references-box" v-if="referenceList && referenceList.length">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>

    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{sclTime}}</view>
    </view>

    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <BlockBtnNormal @click="confirmHandle" :priceInfo="priceInfo" :styleType="fixeBtnType"/>
    </view>

    <u-popup :show="showPopup" mode="bottom" @close="closeHandle" bgColor="transparent"
      :overlayStyle="{background: 'rgba(0, 0, 0, 0.8)'}">
      <view class="popup-wrapper">

        <view class="pay-btn" @click="payHandle">
          <u-icon name="weixin-fill" color="#fff" size="44rpx"></u-icon>
          <text class="text">立即支付</text>
        </view>

      </view>
    </u-popup>
    
    <YiyuanLbModal @rightClick="rightClickHandle" @leftClick="leftClickHandle"
      :visible="yiyuanLbModalVisible" />
      
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'
  import BlockBtnNormal from '@/subcontractorD/components/BlockBtnNormal.vue'
  import YiyuanLbModal from '@/subcontractorD/components/YiyuanLbModal.vue'

  import {
    debounce
  } from 'lodash'
  export default {
    components: {
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2,
      BlockBtnNormal,
      YiyuanLbModal
    },
    props: {
      goodsGroup: {
        type: Array,
        default: []
      },
      scrollTopNum: {
        type: Number,
        default: 0
      },
      sclId: {
        type: String,
        default: '',
      },
      sclName: {
        type: String,
        default: '',
      },
      sclIntro: {
        type: String,
        default: '',
      },
      sclPayBack: {
        type: Boolean,
        default: true
      },
      referenceList: {
        type: Array,
        default: []
      },
      couponInfo: {
        type: Object,
        default: {},
      },
      sclInfo:{
        type: Object,
        default: {},
      } //sclInfo.discountType
    },
    computed: {
      fixeBtnType(){
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if(this.sclInfo.discountType === 4){
          return 3
        } else if (this.sclInfo && this.sclInfo.discountUid) {
          return 4
        }else {
          return 1
        }
      },
      mainBtnType(){
        if(this.fixeBtnType === 3){
          return 2
        }else{
          return this.fixeBtnType
        }
      },
      priceInfo(){
        return {
          hasCoupon:!!this?.sclInfo?.discountUid,
          price: this?.sclInfo.discountPrice || this?.sclInfo.newOriginalPrice,
          discount: this?.sclInfo?.discount
        }
      },
      isUseYiyuanAndNotLb() {
        return this.couponInfo.type === 4 && 
              this.couponInfo.notUseLbYiyuan && 
              this.sclInfo && 
              this.sclInfo.discountType === 4
      },
    },
    watch: {
      scrollTopNum(val) {
        this.showFixedBtn = val > this.windowHeight
      }
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "测一测",
          "hasEntity": true,
        },
        windowHeight: 99999,
        showMoreSclBlock: false,
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
        staticImgs: {
          imgArr: [
            this.imgBaseURL + '/scl/ad/normal/img-1-v1.png',
            this.imgBaseURL + '/scl/ad/common/img-2.png',
            this.imgBaseURL + '/scl/ad/common/img-3.png',
            this.imgBaseURL + '/scl/ad/common/img-4.png',
            this.imgBaseURL + '/scl/ad/common/img-5.png',
            this.imgBaseURL + '/scl/ad/common/img-6.png',
            this.imgBaseURL + '/scl/ad/common/img-7.png',
            this.imgBaseURL + '/scl/ad/common/img-8.png',
            this.imgBaseURL + '/scl/ad/common/img-9.png',
          ],
          tipImg: this.imgBaseURL + '/scl/dialog-bg-1.jpg',
          tipBg: this.imgBaseURL + '/scl/ad/normal/tip-bg.png',
          tipBg2: this.imgBaseURL + '/scl/ad/normal/tip-bg-v2.png',
          btnImg: this.imgBaseURL + '/scl/ad/MBTI/unlock-btn.png',
          smallBtnImg: this.imgBaseURL + '/scl/ad/MBTI/small-unlock-btn.png',
        },
        actType: 'groupA',
        showPopup: false,
        loading: false,
        showFixedBtn: false,
        hasBackLock: false,
        yiyuanLbModalVisible: false,
        hasShowYiyuanLbModal: true, //默认
      }
    },
    mounted() {
      const that = this
      
      console.log(this.$store,'================notUseLbYiyuan')
      
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight - 50
        }
      })
    },
    methods: {
      rightClickHandle(){
        console.log('---------click rightClickHandle')
        this.startScl(13)
      },
      leftClickHandle(){
        console.log('---------click leftClickHandle')
        this.startScl('skipYiyuanLbModal')
      },
      backHandle() {
        if (this.hasBackLock) {
          this.hasBackLock = false
        } else {
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        }
      },
      backToSclList() {
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      startScl(typeCode){
        console.log('-----------type code ------------',typeCode)
        this.payHandle(typeCode)
      },
      updateYiyuanLbStatus() {
        this.$store.commit('user/setNotUseLbYiyuan', false)
      },
      payHandle: debounce(async function(payHandleType) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        this.loading = true
        
        console.log(payHandleType,'======payHandleType')
        
        if(payHandleType != 'skipYiyuanLbModal' && this.isUseYiyuanAndNotLb && payHandleType != 13){
          this.yiyuanLbModalVisible = true
          this.loading = false
          setTimeout(() => {
            uni.hideLoading()
          }, 300)
          
          return false
        }
        if (payHandleType == 'skipYiyuanLbModal') {
          payHandleType = null
        }
        
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          orderType: payHandleType || '7',
          isAdditional: 'N',
          discountUid:this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId')
        })
        
        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                if (payHandleType == 13) {
                  that.updateYiyuanLbStatus()
                }
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(() => {
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                }, 300)
              },
              fail: function(err) {
                that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true

                setTimeout(() => {
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                }, 300)
              }
            });
          } else {
            uni.hideLoading()
            that.$showToast(res.data.message);
            
            setTimeout(()=>{
              this.showPopup = false
              this.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      }, 500),
      confirmHandle() {
        this.useSubscription(this.payHandle)
      },
      closeHandle() {
        this.showPopup = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .before-result-page-common {
    padding-bottom: 10vh;
    background-color: #fff;

    .references-box {
      margin-top: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .tit {
        margin-left: 36rpx;
        width: fit-content;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        padding-bottom: 6rpx;
        border-bottom: 2rpx solid rgba(25, 81, 153, .3);
      }

      .text-list {
        margin: auto;
        margin-top: 18rpx;
        width: 675rpx;
        // height: 1416rpx;
        border: 1rpx solid #C1C1C1;
        padding: 14rpx 18rpx;

        .text {
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #666666;
          line-height: 46rpx;
          text-indent: 1.5em;
          text-align: justify;
        }
      }
    }

    // .references-box -end
    .report-time-box {
      margin: auto;
      margin-top: 32rpx;
      width: 709rpx;
      border-top: 4rpx solid #666;
      padding-top: 16rpx;
      padding-bottom: 50rpx;
      padding-left: 14rpx;
      padding-right: 14rpx;
      display: flex;
      justify-content: space-between;

      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 300;
      color: #666666;

    }


    .fixed-right-tip {
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient(180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      position: fixed;
      right: 0;
      top: 250rpx;
      z-index: 24;

      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;

      text-align: center;
      font-style: normal;
    }

    .img-wrapper {
      position: relative;

      .img {
        width: 750rpx;
      }

      .box-wrapper-1-pos {
        position: absolute;
        // bottom: 0;
        top: 0;
        left: 0;
        right: 0;

        .intro-detail-box {
          width: 696rpx;
          margin: auto;
          margin-top: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
        }

        .base-info-wrapper {
          margin: auto;
          padding: 90rpx 28rpx 80rpx 28rpx;

          .num-box {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 300;
            color: #666666;
          }

          .name-box {
            margin: auto;
            margin-top: 12rpx;

            width: 100%;
            height: 120rpx;
            border-radius: 12rpx;

            line-height: 120rpx;
            text-align: center;

            font-size: 40rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            color: #1A1B1F;
          }

          .conclusion-box {
            margin-top: 144rpx;
            display: flex;
            align-items: center;
            flex-direction: column;

            .tit {

              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 34rpx;
              color: #1A1B1F;
              line-height: 48rpx;
              text-align: center;
              font-style: normal;
            }

            .label {
              margin-top: 20rpx;
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;

              position: relative;

              &::after {
                width: 17rpx;
                height: 1rpx;
                content: '';
                background-color: #979797;
                top: 50%;
                transform: translateY(-50%);
                right: -29rpx;
                position: absolute;
              }

              &::before {
                width: 17rpx;
                height: 1rpx;
                content: '';
                background-color: #979797;
                top: 50%;
                transform: translateY(-50%);
                left: -29rpx;
                position: absolute;
              }
            }

            //.label - end

            .time {
              margin-top: 164rpx;
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 300;
              color: #666666;
            }
          }

        }

        // ..base-info-wrapper - end

      }

      // .box-wrapper-1-pos -- end


      .price-wrapper {


        // background-color: red;
        .price-box-1 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
          line-height: 37rpx;
          text-align: center;
          font-style: normal;
        }

        .first-small-btn {
          width: 522rpx;
          height: 80rpx;
          background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
          border-radius: 40rpx;

          display: flex;
          justify-content: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
          margin-top: 16rpx;

          font-style: normal;
          position: relative;

          .abs-price-tip {
            width: 186rpx;
            height: 72rpx;
            background-repeat: no-repeat;
            background-size: 100%;
            display: flex;
            justify-content: center;

            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;
            text-align: center;
            font-style: normal;
            padding-top: 8rpx;

            position: absolute;
            right: 4rpx;
            bottom: 50rpx;

            .clock-icon {
              padding-top: 8rpx;
              margin-right: 8rpx;
            }
          }

          .btn-inner {
            display: flex;
            align-items: flex-end;
            height: 60rpx;

            .coupon-info-box {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 30rpx;
              color: #FFFFFF;
              text-align: center;
              font-style: normal;
              padding-bottom: 6rpx;
              margin-right: 8rpx;
            }
          }

          .unit-box {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            // line-height: 37rpx;
            text-align: center;
            font-style: normal;

            padding-bottom: 4rpx;
          }

          .num-box {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            // line-height: 61rpx;
            text-align: center;
            font-style: normal;
          }

          .text-box {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            // line-height: 42rpx;
            text-align: center;
            font-style: normal;
            padding-bottom: 6rpx;
            margin-left: 10rpx;
          }
        }

      }



      .small-btn-wrapper {
        width: 300rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        margin-top: 56rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }


      .box-wrapper-2-pos {
        position: absolute;
        top: 680rpx;
        right: 0;
        left: 0;
      }

      .before-exit-btn-wrapper {
        width: 390rpx;
        height: 80rpx;
        background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
        border-radius: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        .price-box {
          display: flex;
          align-items: flex-end;

          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .abs-tip-box {
          position: absolute;
          bottom: 62rpx;
          left: 50%;
          transform: translateX(-50%);

          background-repeat: no-repeat;
          background-size: 100%;


          // display: flex;
          // justify-content: center;
          // align-items: center;
          width: 200rpx;
          height: 50rpx;
          box-sizing: border-box;
          text-align: center;
          padding-top: 6rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4A4A;
          // line-height: 30rpx;
          // text-align: left;
          font-style: normal;

          // text-align: center;

        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-left: 12rpx;
        }

        margin-top: 40rpx;
      }


      .box-wrapper-3-pos {
        position: absolute;
        top: 864rpx;
        right: 0;
        left: 0;
      }

      .box-wrapper-4-pos {
        position: absolute;
        top: 764rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-5-pos {
        position: absolute;
        top: 786rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-6-pos {
        position: absolute;
        top: 898rpx;
        left: 0;
        right: 0;
      }


      .box-wrapper-7-pos {
        position: absolute;
        top: 438rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-8-pos {
        position: absolute;
        top: 784rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-9-pos {
        position: absolute;
        // bottom: 332rpx;
        top: 660rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-11-pos {
        position: absolute;
        bottom: 796rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-13-pos {
        position: absolute;
        top: 192rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-14-pos {
        position: absolute;
        top: 746rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-15-pos {
        position: absolute;
        bottom: 748rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-16-pos {
        position: absolute;
        bottom: 844rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-17-pos {
        position: absolute;
        bottom: 204rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-19-pos {
        position: absolute;
        bottom: 516rpx;
        left: 0;
        right: 0;
      }



    }

    // .img-wrapper -- end


    .info-box-list {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 24rpx;


      .info-box {
        width: 336rpx;
        height: 266rpx;
        border-radius: 14rpx;
        border: 1rpx solid #D1D0D0;
        box-sizing: border-box;
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .more-intro-abs {
          position: absolute;

          top: -32rpx;
          left: -12rpx;

          width: 232rpx;
          height: 50rpx;
          background: linear-gradient(180deg, #FAB158 0%, #FF5862 100%);
          border-radius: 0rpx 14rpx 0rpx 14rpx;

          line-height: 50rpx;
          text-align: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          font-style: normal;
        }

        .name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }

        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 6rpx;
          margin-bottom: 6rpx;

          column-gap: 12rpx;

          .current-price {
            display: flex;
            align-items: center;
            column-gap: 4rpx;

            .unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #FF4A4A;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }

            .num {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 60rpx;
              color: #FF4A4A;
              line-height: 74rpx;
              text-align: left;
              font-style: normal;

            }
          }

          .market-price {
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            position: relative;


            ::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 68rpx;
              height: 1rpx;
              background: #888;
              transform: translate(-50%);
            }




            .unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }

            .num {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }



        .intro-row {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 21rpx;
          color: #666666;
          line-height: 29rpx;

          font-style: normal;

          width: 300rpx;
          height: 80rpx;
          background: #F4F5F8;
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;


          text-align: center;
          box-sizing: border-box;
          padding: 0 12rpx;


        }

      }


      .info-box-act {
        border: 3rpx solid #728AFF;
      }

    }

    // .info-box-list -- end



    .btn-wrapper-pos {
      position: fixed;
      bottom: 7vh;

      left: 0;
      right: 0;

      display: flex;
      justify-content: center;

      .btn-wrapper {
        
        width: 522rpx;
        height: 80rpx;
        background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
        border-radius: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;

        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        margin-top: 16rpx;

        font-style: normal;
        position: relative;

        .abs-price-tip {
          width: 156rpx;
          height: 72rpx;
          background-repeat: no-repeat;
          background-size: 100%;
          display: flex;
          justify-content: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          text-align: center;
          font-style: normal;
          padding-top: 8rpx;

          position: absolute;
          right: 4rpx;
          bottom: 50rpx;

          .clock-icon {
            padding-top: 8rpx;
            margin-right: 8rpx;
          }
        }

        .btn-inner {
          display: flex;
          align-items: flex-end;
          height: 60rpx;

          .coupon-info-box {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            padding-bottom: 6rpx;
            margin-right: 8rpx;
          }
        }

        .unit-box {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
          // line-height: 37rpx;
          text-align: center;
          font-style: normal;

          padding-bottom: 4rpx;
        }

        .num-box {
          font-family: HelveticaNeue, HelveticaNeue;
          font-weight: 500;
          font-size: 50rpx;
          color: #FFFFFF;
          // line-height: 61rpx;
          text-align: center;
          font-style: normal;
        }

        .text-box {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          // line-height: 42rpx;
          text-align: center;
          font-style: normal;
          padding-bottom: 6rpx;
          margin-left: 10rpx;
        }
      }
    }


    .popup-wrapper {
      width: 750rpx;
      min-height: 502rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding-top: 66rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      .pay-btn {
        width: 600rpx;
        height: 90rpx;
        background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
        border-radius: 45rpx;

        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        margin-top: 40rpx;

        .text {
          font-family: PingFang-SC, PingFang-SC;

          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-left: 10rpx;
        }
      }


    }
  }
</style>